<template>
  <div class="tag-cloud-container">
    <h3 class="title">
      <el-icon><Collection /></el-icon>
      热门标签
    </h3>
    <div v-if="loading" class="loading">
      <el-skeleton :rows="3" animated />
    </div>
    <div v-else class="tag-list">
      <el-tag
        v-for="tag in tagList"
        :key="tag.id"
        :type="getTagType(tag.id)"
        effect="light"
        class="tag-item"
        @click="handleTagClick(tag)"
      >
        {{ tag.name }}
        <span class="tag-count">({{ tag.count }})</span>
      </el-tag>
      <div v-if="tagList.length === 0" class="empty-tags">
        暂无标签
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Collection } from '@element-plus/icons-vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  tags: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['tag-click'])

const tagList = ref([])

// 根据ID生成不同的标签类型
const getTagType = (id) => {
  const types = ['', 'success', 'warning', 'danger', 'info']
  return types[id % types.length]
}

// 点击标签触发事件
const handleTagClick = (tag) => {
  emit('tag-click', tag)
}

onMounted(() => {
  // 如果父组件传入了tags，则使用父组件的数据
  if (props.tags && props.tags.length > 0) {
    tagList.value = props.tags
  } else {
    // 否则使用默认的模拟数据
    tagList.value = [
      { id: 1, name: '健康饮食', count: 28 },
      { id: 2, name: '体育锻炼', count: 24 },
      { id: 3, name: '心理健康', count: 22 },
      { id: 4, name: '医疗常识', count: 19 },
      { id: 5, name: '睡眠质量', count: 16 },
      { id: 6, name: '疾病预防', count: 15 },
      { id: 7, name: '校园健康', count: 14 },
      { id: 8, name: '常见疾病', count: 12 },
      { id: 9, name: '运动指南', count: 11 },
      { id: 10, name: '营养科普', count: 10 }
    ]
  }
})
</script>

<style lang="scss" scoped>
.tag-cloud-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 20px;
  
  .title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
    
    .el-icon {
      color: #409EFF;
      margin-right: 5px;
    }
  }
  
  .loading {
    padding: 10px 0;
  }
  
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    
    .tag-item {
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      font-size: 13px;
      
      .tag-count {
        font-size: 12px;
        opacity: 0.8;
        margin-left: 2px;
      }
    }
  }
  
  .empty-tags {
    text-align: center;
    padding: 15px 0;
    color: #909399;
    font-size: 14px;
  }
}
</style> 